<template>
  <header class="header">
    <h1>todos</h1>
    <input id="toggle-all" class="toggle-all" type="checkbox" v-model="isAll">
    <label for="toggle-all"></label>
    <input
      class="new-todo"
      placeholder="输入任务名称-回车确认"
      autofocus
      @keydown.enter="addFn"
      v-model="value"
    />
  </header>
</template>

<script>
export default {
    props: {
        arr:Array,
    },
    data() {
        return {
            value:''
        }
    },
    methods: {
        // 添加任务  -> 子传父
        addFn() {
            this.$emit('getAdd', this.value)
            this.value = ''  //清空输入框
        }
    },
    computed: {
        isAll: {
            set(checked) {
                // 影响数组里每个小选框绑定的isDone属性 全选功能
                this.arr.forEach(item => item.isDone = checked)
            },
            get() {
                //  小选框统计状态 -> 全选框
                //  如果没有数据, 直接返回false-不要让全选勾选状态
               return this.arr.length !== 0 && this.arr.every(item => item.isDone)
            }
        }
    }
}
</script>